<!DOCTYPE html>
<html lang="zxx">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
	<title>王志超的网站</title>

	<!-- css include -->
	<link rel="stylesheet" type="text/css" href="css/materialize.css">
	<link rel="stylesheet" type="text/css" href="css/icofont.css">
	<link rel="stylesheet" href="font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
	<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">

	<!-- my css include -->
	<link rel="stylesheet" type="text/css" href="css/custom-menu.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	<link rel="icon" href="./img/logo/icon.png">
	</link>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
	<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

</head>


<body>

	<div id="app">



		<div class="thetop"></div>
		<!-- for back to top -->

		<div class='backToTop'>
			<a class='scroll'>
				<!-- <span>T</span>
				<span>O</span>
				<span>P</span> -->
				<span class="go-up">
					<i class="icofont icofont-long-arrow-up"></i>
				</span>
			</a>
		</div>
		<!-- backToTop -->




		<!-- ==================== header-section Start ==================== -->
		<header id="header-section" class="header-section w100dt navbar-fixed">

			<nav class="nav-extended main-nav">
				<div class="container">
					<div class="row">
						<div class="nav-wrapper w100dt">

							<div class="logo left">
								<a href="index.html" class="brand-logo">
									<img src="img/logo/logo.png" alt="brand-logo">
								</a>
							</div>
							<!-- logo -->

							<div>
								<a data-activates="mobile-demo" class="button-collapse">
									<i class="icofont icofont-navigation-menu"></i>
								</a>
								<ul id="nav-mobile" class="main-menu center-align hide-on-med-and-down">
									<li class="active"><a href="index.html">主页</a></li>
									<li><a href="./act/html/index.html">Html教程</a></li>
									<!-- 	<li class="dropdown">
										<a >PAGES <i class="icofont icofont-simple-down"></i></a>
										<ul class="dropdown-container">
											<li><a href="404.html">404 Page</a></li>
										</ul>
									</li> -->
									<li><a href="#">Javascript教程</a></li>
									<li><a href="#">联系我</a></li>
								</ul>
								<!-- /.main-menu -->

								<!-- ******************** sidebar-menu ******************** -->
								<ul class="side-nav" id="mobile-demo">
									<li class="snavlogo center-align"><img src="img/logo/logo.png" alt="logo"></li>
									<li class="active"><a href="index.html">主页</a></li>
									<li><a href="./act/html/index.html">Html教程</a></li>
									<li><a href="#">Javascript教程</a></li>
									<li><a href="#">联系我</a></li>
								</ul>
							</div>
							<!-- main-menu -->

							<a class="search-trigger right">
								<i class="icofont icofont-search"></i>
							</a>
							<!-- search -->
							<div id="myNav" class="overlay">
								<a href="javascript:void(0)" class="closebtn">&times;</a>
								<div class="overlay-content">
									<form>
										<input type="text" name="search" placeholder="Search...">
										<br>
										<button class="waves-effect waves-light" type="submit"
											name="action">Search</button>
									</form>
								</div>
							</div>

						</div>
						<!-- /.nav-wrapper -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</nav>

		</header>
		<!-- /#header-section -->
		<!-- ==================== header-section End ==================== -->




		<!-- ==================== blog-slider-section start ==================== -->
		<section id="blog-slider-section" class="blog-slider-section w100dt mb-50">
			<div class="container">

				<div class="slider">
					<ul class="slides">
						<li class="slider-item" v-for='(item,index) in banner1List' :key="index">
							<img :src="item.url" alt="Image">
							<div class="caption center-align">
								<a class="tag l-blue w100dt mb-30">{{item.tag}}</a>
								<h1 class="card-title mb-10">
									{{item.title}}
								</h1>
								<p>
									{{item.detile}}
								</p>
								<a @click='gotoPage(item)' class="custom-btn waves-effect waves-light">查看更多</a>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<!-- container -->
		</section>
		<!-- /#blog-slider-section -->
		<!-- ==================== blog-slider-section end ==================== -->







		<!-- ==================== daily-lifestyle-section Start ==================== -->
		<section id="daily-lifestyle-section" class="daily-lifestyle-section mb-50">
			<div class="container">

				<div class="owl-carousel small-carousel owl-theme">
					<div class="item" v-for='(item,index) in banner2List' :key="index">
						<div class="card horizontal">
							<div class="card-image">
								<img :src="item.url" alt="Image">
								<span class="effect"></span>
							</div>
							<!-- /.card-image -->
							<div class="card-stacked">
								<div class="card-content">
									<a class="tag left l-blue mb-10" @click='gotoPage(item)'>{{item.title}}</a>
									<a @click='open' class="sm-name">{{item.detile}}</a>
								</div>
								<!-- /.card-content -->
								<div class="card-action">
									<p class="hero left">
										BY - <a class="l-blue">{{item.name}}</a>
									</p>
									<ul class="post-mate right">
										<li>
											<a class="m-0"><i class="icofont icofont-comment"></i> {{item.number}}</a>
										</li>
									</ul>
									<!-- /.post-mate -->
								</div>
								<!-- /.card-action -->
							</div>
							<!-- /.card-stacked -->
						</div>
						<!-- /.card -->
					</div>
					<!-- /.item -->
				</div>
				<!-- /.small-carousel -->
			</div>
			<!-- container -->
		</section>
		<!-- /#daily-lifestyle-section -->
		<!-- ==================== daily-lifestyle-section End ==================== -->





		<!-- ==================== blog-section start ==================== -->
		<section id="blog-section" class="blog-section w100dt mb-50">
			<div class="container">
				<div class="row">

					<div class="col s12 m8 l8">

						<div class="blogs mb-30" v-for='(item,index) in blogs' :key="index">
							<div class="card">
								<div class="card-image" v-if='item.url'>
									<img :src='item.url' alt="Image">
									<a
										class="btn-floating center-align cmn-bgcolor halfway-fab waves-effect waves-light">
										<i class="icofont icofont-camera-alt"></i>
									</a>
								</div>
								<!-- /.card-image -->
								<div class="card-content w100dt">
									<p v-if='item.tag'>
										<a class="tag left w100dt l-blue mb-30">{{item.tag}}</a>
									</p>
									<a @click='gotoPage(item)' class="card-title">
										{{item.title}}
									</a>
									<p class="mb-30">
										{{item.detile}}
									</p>
									<ul class="post-mate-time left">
										<li>
											<p class="hero left">
												By - <a class="l-blue">wangzc</a>
											</p>
										</li>
										<li>
											<i class="icofont icofont-ui-calendar"></i> {{item.time}}
										</li>
									</ul>

									<ul class="post-mate right">
										<li class="like">
											<a>
												<i class="icofont icofont-heart-alt"></i> {{item.like}}
											</a>
										</li>
										<li class="comment">
											<a>
												<i class="icofont icofont-comment"></i> {{item.number}}
											</a>
										</li>
									</ul>
								</div>
								<!-- /.card-content -->
							</div>
							<!-- /.card -->
						</div>
						<!-- /.blogs -->
						<!-- /.blogs -->

						<ul class="pagination w100dt">
							<!-- 			<el-pagination
							background
							layout="prev, pager, next"
							:total="1000">
						  </el-pagination> -->
							<li class="waves-effect"><a href="#!"><i class="icofont icofont-simple-left"></i></a></li>
							<li class="active"><a href="#!">1</a></li>
							<li class="waves-effect"><a href="#!">2</a></li>
							<li class="waves-effect"><a href="#!">3</a></li>
							<li class="waves-effect"><a href="#!">4</a></li>
							<li class="waves-effect"><a href="#!">5</a></li>
							<li class="waves-effect"><a href="#!"><i class="icofont icofont-simple-right"></i></a></li>
						</ul>

					</div>
					<!-- colm8 -->




					<div class="col s12 m4 l4">

						<div class="sidebar-testimonial mb-30">
							<div class="sidebar-title center-align">
								<h2>Hi Its Me!</h2>
							</div>
							<!-- /.sidebar-title -->

							<div class="carousel carousel-slider center" data-indicators="true">
								<div class="carousel-item">
									<div class="item-img">
										<span></span>
									</div>
									<h2>王志超</h2>
									<small>前端码农</small>
									<p>
										<span id="busuanzi_container_site_pv">本站总访问量<span
												id="busuanzi_value_site_pv"></span>次</span>

									</p>
								</div>
								<div class="carousel-item">
									<div class="item-img">
										<span></span>
									</div>
									<h2>王志超</h2>
									<small>前端码农</small>
									<p>
										学无止境

									</p>
								</div>
							</div>
						</div>
						<!-- /.sidebar-testimonial -->



						<div class="sidebar-followme w100dt mb-30">
							<div class="sidebar-title center-align">
								<h2>关注我</h2>
							</div>
							<!-- /.sidebar-title -->

							<ul class="followme-links w100dt">
								<li class="mrb15">
									<a class="facebook" target="_blank" href="https://www.cnblogs.com/wangzhichao/">
										<i class="iconfont icon-bokeyuan"></i>
										<small class="Followers white-text">354 Likes</small>
									</a>
								</li>
								<li class="mrb15">
									<a class="twitter" target="_blank" href="https://github.com/wzc570738205">
										<i class="iconfont icon-git"></i>
										<small class="Followers white-text">8 Follows</small>
									</a>
								</li>
								<li>
									<a class="google-plus" target="_blank"
										href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501">
										<i class="iconfont icon-qq"></i>
										<small class="Followers white-text">256 Follows</small>
									</a>
								</li>
							</ul>

						</div>
						<!-- /.sidebar-followme -->


						<!-- /.featured-posts -->




						<div class="top-post w100dt mb-30">
							<div class="sidebar-title center-align">
								<h2>热门帖子</h2>
							</div>
							<!-- /.sidebar-title -->

							<ul id="tabs-swipe-demo" class="top-post-tab tabs tabs-fixed-width">
								<li class="tab"><a href="#test-swipe-1" class="active">最多查看</a></li>
								<li class="tab"><a href="#test-swipe-2">最新</a></li>
							</ul>

							<div id="test-swipe-1" class="tab-contant most-view">

								<div class="sidebar-posts">
									<div class="card">
										<div class="card-image mb-10">
											<img src="img/fashion.jpg" alt="Image">
											<span class="effect"></span>
										</div>
										<!-- /.card-image -->
										<div class="card-content w100dt">
											<p>
												<a class="tag left w100dt l-blue mb-10">置顶🔝</a>
											</p>
											<a href="#" class="card-title">
												博客园改版最新UI2.0
											</a>
											<ul class="post-mate-time left">
												<li>
													<p class="hero left">
														By - <a class="l-blue">SujonMaji</a>
													</p>
												</li>
											</ul>

											<ul class="post-mate right">
												<li class="like">
													<a>
														<i class="icofont icofont-heart-alt"></i> 55
													</a>
												</li>
												<li class="comment">
													<a>
														<i class="icofont icofont-comment"></i> 32
													</a>
												</li>
											</ul>
										</div>
										<!-- /.card-content -->
									</div>
									<!-- /.card -->

									<div class="hot-post w100dt mb-10" v-for='(item,index) in blogs' :key="index">
										<div class="hot-post-image">
											<img :src="item.url" alt="Image">
											<span class="effect"></span>
										</div>
										<!-- /.hot-post-image -->
										<div class="hot-post-stacked">
											<p>
												<a class="tag left w100dt l-blue mb-10">{{item.tag}}</a>
											</p>
											<a @click='gotoPage(item)' class="sm-name mb-10">{{item.title}}</a>
											<div class="hot-post-action">
												<p class="hero left">
													BY - <a class="l-blue">{{item.name}}</a>
												</p>
												<ul class="post-mate right">
													<li class="comment">
														<a>
															<i class="icofont icofont-comment"></i> {{item.number}}
														</a>
													</li>
												</ul>
												<!-- /.post-mate -->
											</div>
											<!-- /.hot-post-action -->
										</div>
										<!-- /.hot-post-stacked -->
									</div>
									<!-- /.hot-post -->

								</div>
								<!-- /.sidebar-posts -->

							</div>
							<!-- /.most-view -->


							<div id="test-swipe-2" class="tab-contant recent-post">

								<div class="hot-post w100dt p-15" v-for='(item,index) in blogs' :key="index">
									<div class="hot-post-image">
										<img :src="item.url" alt="Image">
										<span class="effect"></span>
									</div>
									<!-- /.hot-post-image -->
									<div class="hot-post-stacked">
										<p>
											<a class="tag left w100dt l-blue mb-10">{{item.tag}}</a>
										</p>
										<a @click='gotoPage(item)' class="sm-name mb-10">{{item.title}}</a>
										<div class="hot-post-action">
											<p class="hero left">
												BY - <a class="l-blue">{{item.name}}</a>
											</p>
											<ul class="post-mate right">
												<li class="comment">
													<a>
														<i class="icofont icofont-comment"></i> {{item.number}}
													</a>
												</li>
											</ul>
											<!-- /.post-mate -->
										</div>
										<!-- /.hot-post-action -->
									</div>
									<!-- /.hot-post-stacked -->
								</div>
								<!-- /.hot-post -->


							</div>
							<!-- /.recent-post -->



							<!-- /.tab-contant -->
						</div>
						<!-- /.top-post -->




						<!-- 			<div class="sidebar-subscribe w100dt">
							<div class="sidebar-title center-align">
								<h2>说点什么吧</h2>
							</div>

							<div class="subscribe" style="    max-height: 800px;
							overflow-y: auto;padding:0 10 10 0!important;">
								<div id="gitalk-container"></div>

								
							</div>

						</div>  -->
						<!-- /.sidebar-subscribe -->

					</div>
					<!-- colm4 -->

				</div>
				<!-- row -->
			</div>
			<!-- container -->
		</section>
		<!-- /#blog-section -->
		<!-- ==================== blog-section end ==================== -->





		<!-- ==================== instag leftram-section Start ==================== -->
		<section id="instagram-section" class="instagram-section w100dt">

			<div class="instagram-link w100dt">
				<a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501"
					target="_blank" rel="noopener noreferrer">
					<span>你可以在这里找到我</span><br>
					@wangzc
				</a>
			</div>

		</section>
		<!-- /#instag leftram-section -->
		<!-- ==================== instag leftram-section End ==================== -->





		<!-- ==================== footer-section Start ==================== -->
		<footer id="footer-section" class="footer-section w100dt">
			<div class="container">

				<div class="footer-logo w100dt center-align mb-30">
					<a class="brand-logo">
						<img src="img/logo/logo.png" alt="brand-logo">
					</a>
				</div>
				<!-- 
				<ul class="footer-social-links w100dt center-align mb-30">
					<li><a class="facebook">FACEBOOK</a></li>
					<li><a class="twitter">TWITTER</a></li>
					<li><a class="google-plus">GOOGLE+</a></li>
					<li><a class="linkedin">LINKDIN</a></li>
					<li><a class="pinterest">PINTEREST</a></li>
					<li><a class="instagram">INSTAGRAM</a></li>
				</ul> -->

				<p class="center-align">
					<i class="icofont icofont-heart-alt l-blue"></i>
					All Right Reserved&copy;2015, Deasined by
					<a class="l-blue">HTMLmate</a>
				</p>

			</div>
			<!-- container -->
		</footer>
		<!-- /#footer-section -->
		<!-- ==================== footer-section End ==================== -->

	</div>

</body>

</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="js/index.js"></script>
<!-- my custom js -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>

<!-- my custom js -->
<script type="text/javascript" src="js/custom.js"></script>

<script type="text/javascript">
</script>
<script>
	var gitalk = new Gitalk({
		clientID: 'be18b06eea7b7021c473',
		clientSecret: '346423d34fa36c72577999644da79935a8935032',
		repo: 'wangzc',
		owner: 'wzc570738205',
		admin: ['wzc570738205'],
		id: location.pathname, // Ensure uniqueness and length less than 50
		distractionFreeMode: false // Facebook-like distraction free mode
	})

	//	gitalk.render('gitalk-container')
</script>